<template>
  <div>
    <div class="hide">
      <van-nav-bar left-arrow animated @click-left="onClickLeft">
        <template #title>
          <van-tabs v-model="active">
            <van-tab v-for="(item,index) in activeData" :key="index">
              <template #title class="hide-ft">{{item}}</template>
            </van-tab>
          </van-tabs>
        </template>
      </van-nav-bar>
    </div>

    <div class="subject" v-if="active == 0">
      <div class="subjectData" v-for="(item,index) in auu" :key="index">
        <div>
           <video width="100%" height="100%" :src="item.videoPath" object-fit: fill controls></video>
          <div class="explain">
            <h5>{{item.videoName}}</h5>
            <div class="zan"> 
              <div>
                <img src="static/PictureFish/园.png" alt />
                <span>{{item.id}}</span>
              </div>
              <div>
                <img src="static/PictureFish/点赞.png" alt />
                <span>{{item.praise}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="location">
          <img src="static/PictureFish/位置.png" alt />
          <span>德阳</span>
        </div>
      </div>
    </div>
    <div class="subject" v-else>
        <div class="subjectData" v-for="(item,index) in auu" :key="index">
        <div>
          <video class="logo" controls>
              <source :src="item.videoPath" type="video/mp4" />
            </video>
          <div class="explain">
            <h5>{{item.videoName}}</h5>
            <div class="zan"> 
              <div>
                <img src="static/PictureFish/园.png" alt />
                <span>{{item.id}}</span>
              </div>
              <div>
                <img src="static/PictureFish/点赞.png" alt />
                <span>{{item.praise}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="location">
          <img src="static/PictureFish/位置.png" alt />
          <span>德阳</span>
        </div>
      </div>
    </div>

<!-- 
<div class="camera">
<van-uploader v-model="fileList">
  <template #preview-cover="{ file }">
    <div class="preview-cover van-ellipsis">{{ file.name }}</div>
  </template>
</van-uploader>
</div> -->



  </div>
</template>
<script>
import { Toast } from 'vant';
import axios from 'axios';

export default {
  data() {
    return {
      active: '',
      activeData: ['推荐', '更新'],
      auu: [],
      fileList:[{id:"1",videoName:'123',praise:'123'}]
    };
  },
  mounted() {
    axios.post('/api/selectVideoList', {}).then(res => {
      this.auu = res.data.data;
      console.log(this.auu);
    });
  },
  methods: {
    //点击返回上一页面
    onClickLeft() {
       this.$router.push({
        name: '首页',
      });
    },
    //根据id差单个视频
    inFLV(tid) {
      axios.post('/api/selectVideo', {CVideoVo:{
        id:tid
      }}).then(res => {
      this.auu = res.data.data;
      console.log(res);
      console.log(this.auu);
    });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  }
};
</script>
<style  scoped>
.location {
  position: relative;
  bottom: 10rem;
  left: 1rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  width: 5rem;
  height: 2rem;
  border-radius: 1rem;
}

.subject {
  display: flex;
  flex-wrap:wrap;
  padding: 1%;
  background: rgba(0, 0, 0, 0.1);
}
.subjectData {
  width: 47%;
  margin: 0.5rem;
  border-radius: 0.5rem;
  background-color: white;
}
.subjectData .logo {
  width: 100%;
}
.explain {
  padding: 1rem;
}
.explain .zan {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.explain .zan span {
  color: rgba(0, 0, 0, 0.6);
}


.camera{
  position: fixed;
  bottom: 9rem;
  left: 16rem;
}
 .preview-cover {
  border: 2px solid rebeccapurple;
  border-radius: 6rem;
  }

</style>